<template>
	<f-popup ref="popup">
		<view class="com-dialog">
			<view class="dialog-content">
				<view class="content">
					<view class="content-title">{{dialogTitle}}</view>
					<view class="content-text">{{dialogContent}}</view>
				</view>
				<view class="dialog-btns">
					<button class="cancel-btn flex-1" @click="handleCancel">{{dialogCancelButtonText}}</button>
					<button class="confirm-btn flex-1" v-if="openType !== 'getPhoneNumber'" @click="handleConfirm">{{dialogConfirmButtonText}}</button>
					<button class="confirm-btn flex-1" v-else :open-type="openType" @getphonenumber="getPhoneNumber">{{dialogConfirmButtonText}}</button>
				</view>
			</view>
		</view>
	</f-popup>
</template>

<script>
	import Vue from 'vue';
	export default {
		name: "com-dialog",
		props: {
			title: {
				type: String,
				default: '提示',
			},
			content: {
				type: String,
				default: '内容',
			},
			confirmButtonText: {
				type: String,
				default: '确认',
			},
			cancelButtonText: {
				type: String,
				default: '取消',
			},
			openType: {
				type: String,
				default: '',
			},
			onConfirm: {
				type: Function,
				default: () => {}
			},
			onCancel: {
				type: Function,
				default: () => {}
			}
		},
		data() {
			return {
				dialogTitle: this.title, // 标题
				dialogContent: this.content, // 内容
				dialogConfirmButtonText: this.confirmButtonText, // 确认文字
				dialogCancelButtonText: this.cancelButtonText, // 取消文字
			};
		},
		created() {
			uni.$on('show-dialog', (data) => {
				this.dialogTitle = data.title || '提示';
				this.dialogContent = data.content || '内容';
				this.dialogConfirmButtonText = data.confirmButtonText || '确定';
				this.dialogCancelButtonText = data.cancelButtonText || '取消';

				this.handleConfirm = data.onConfirm || this.handleConfirm;
				this.handleCancel = data.onCancel || this.handleCancel;
				this.open()
			});
			uni.$on('hide-dialog', this.close);
		},
		beforeDestroy() {
			// uni.$off('show-dialog');
			// uni.$off('hide-dialog');
		},
		methods: {
			getPhoneNumber(event) {
				const params = {
					appid: this.$store.state.common.appid,
					code: event.detail.code
				}
				this.$api.wxPhoneLoginApi(params).then(res=> {
					uni.showToast({
						title: '登录成功',
					})
					this.$store.commit('login/SET_TOKEN', res.data.access_token)
					this.$store.commit('login/SET_PHONE_VERIFY', res.data.phone_verify)
					this.$store.commit('login/SET_IS_REAL', res.data.is_real)
					this.$store.commit('login/SET_IS_BIND_WX', res.data.is_bind_wx)
					this.$store.commit('login/SET_IDENTITY_VERIFY', res.data.identity_verify)
					this.$emit('success')
					this.close()
				}).catch(err=> {
					console.log('err', err)
				})
			},
			handleConfirm() {
				this.onConfirm();
				this.$emit('confirm');
			},
			handleCancel() {
				this.onCancel();
				this.$emit('cancel');
				this.close()
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.com-dialog {
		padding: 48rpx;
		overflow: hidden;
		border-radius: 24rpx;
		background-color: #FFFFFF;

		.content {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
		}

		.content-title {
			font-size: 36rpx;
			font-weight: 600;
			line-height: 52rpx;
			text-align: center;
			padding-bottom: 16rpx;
			color: rgba(0, 0, 0, 0.9);
		}

		.content-text {
			font-size: 32rpx;
			font-weight: 400;
			line-height: 48rpx;
			text-align: center;
			color: rgba(0, 0, 0, 0.6);
		}


		.dialog-btns {
			display: flex;
			align-items: center;
			gap: 24rpx;
			padding-top: 48rpx;
		}
	}
</style>